<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-26 15:42:00
 * @LastEditTime: 2020-05-15 12:10:24
 * @FilePath: \client\src\views\admin\Dashboard.vue
 * @Description: 管理员主界面
 -->

<template>
  <b-container class="main bg-img">
    <b-row>
      <b-col cols="6" sm="3" md="3" lg="3" xl="3">
        <b-card bg-variant="primary">
          <b-card-title>{{blogInfo.articlesCount}}</b-card-title>
          <b-card-text>文章</b-card-text>
        </b-card>
      </b-col>
      <b-col cols="6" sm="3" md="3" lg="3" xl="3">
        <b-card bg-variant="info">
          <b-card-title>{{blogInfo.totalComments}}</b-card-title>
          <b-card-text>评论</b-card-text>
        </b-card>
      </b-col>
      <b-col cols="6" sm="3" md="3" lg="3" xl="3">
        <b-card bg-variant="success">
          <b-card-title>{{blogInfo.totalTags}}</b-card-title>
          <b-card-text>标签</b-card-text>
        </b-card>
      </b-col>
      <b-col cols="6" sm="3" md="3" lg="3" xl="3">
        <b-card bg-variant="danger">
          <b-card-title>{{blogInfo.totalViews}}</b-card-title>
          <b-card-text>浏览</b-card-text>
        </b-card>
      </b-col>
      <!-- 评论管理模块 -->
      <b-col cols="12" sm="12" md="6" lg="6" xl="6">
        <b-card class="comments" header="最新评论">
          <b-list-group class="comment" v-for="comment in pageInfo.data" :key="comment.id">
            <b-list-group-item class="border-buttom">
              <p>
                <b-link :to="'/post/'+comment.articleId">{{comment.content}}</b-link>
                <b-badge variant="danger" class="del" @click="delComment(comment.id)">删除</b-badge>
              </p>
              <p
                class="sm-text"
                v-if="comment.type == 1"
                v-text="(comment.commentatorName || '匿名用户') + '评论了文章：' + comment.parent +'  '+ comment.gmtUpdate"
              ></p>
              <p
                class="sm-text"
                v-else
                v-text="(comment.commentatorName || '匿名用户') + '回复了评论：' + comment.parent +'  '+ comment.gmtUpdate"
              ></p>
            </b-list-group-item>
          </b-list-group>
          <!-- 分页 -->
          <div class="overflow-auto pagination" v-if="pageInfo.totalPage>1">
            <b-pagination-nav
              :link-gen="linkGen"
              :number-of-pages="pageInfo.totalPages"
              use-router
              :value="currentPage"
            ></b-pagination-nav>
          </div>
        </b-card>
      </b-col>
      <!-- 图表统计模块 -->
      <b-col cols="12" sm="12" md="6" lg="6" xl="6">
        <b-card class="chart">
          <v-chart :options="polar" theme="macarons" />
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import url from "@/request/url";
import router from "@/router/index";
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/component/polar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/markLine";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

export default {
  name: "Dashboard",
  data() {
    return {
      polar: {
        title: {
          text: "最近几月写文章数统计"
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: true
            },
            restore: {
              show: true
            },
            dataZoom: {
              show: true
            },
            saveAsImage: {
              show: true
            },
            magicType: {
              type: ["line", "bar"]
            }
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["文章数"]
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [],
        animationDuration: 2000
      },
      blogInfo: {},
      pageInfo: [],
      currentPage: 1
    };
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.currentPage = to.query.page || 1;
      this.getComments();
    }
  },
  methods: {
    linkGen(pageNum) {
      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    },
    getComments() {
      this.$axios
        .get(url.admin.comment, { params: { pageNumber: this.currentPage } })
        .then(resp => {
          this.pageInfo = resp.data;
          this.currentPage = this.pageInfo.currentPage;
        });
    },
    delComment(id) {
      this.$bvToast.toast("评论已删除", {
        title: "提示",
        variant: "warning",
        solid: true,
        toaster: "b-toaster-top-center"
      });
      this.$axios.delete(url.admin.comment + id).then(resp => {
        this.getComments();
      });
    }
  },
  created() {
    this.$axios.get(url.comm.blogInfo).then(resp => {
      this.blogInfo = resp.data;
    });
    this.getComments();
  },
  activated() {
    this.$axios.get(url.admin.chart).then(resp => {
      this.polar.xAxis.data = resp.data.xAxis;
      let series1 = {
        name: "文章数",
        type: "line",
        data: resp.data.counts,
        label: {
          normal: {
            show: true,
            position: "top"
          }
        },
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" }
          ]
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }]
        }
      };
      this.polar.series = [series1];
    });
  }
};
</script>

<style scoped>
.comments {
  margin-top: 10px;
  padding: 0;
}
.comment {
  border-style: none;
}
.echarts {
  width: 100%;
  height: 100%;
}
.chart {
  height: 500px;
  margin-top: 10px;
}
.del {
  color: white;
  cursor: pointer;
  float: right;
}
.pagination {
  margin-top: 10px;
  margin-bottom: 0;
}
.sm-text {
  font-size: 13px;
  color: #767476;
}
p {
  margin: 0;
}
.border-buttom {
  border-top-style: none;
  border-left-style: none;
  border-right-style: none;
}
</style>